<template>
  <div class="plumb-flow">
    <div class="flow-paper" id="flow-paper">
      <div
        v-for="(item, index) in nodes"
        :style="buildStyle(item)"
        :key="index"
        :id="item.id"
        @click="nodeClick($event,item)"
        class="flow-node action-node"
        :class="{'n-getway':item.type=='getway'}"
      >
        <span class="n-label">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, watch } from "vue";
import {} from "@ant-design/icons-vue";
import { draggable } from "draggable-vue-directive";
import { v4 as uuid } from "uuid";
import { jsPlumb } from "jsplumb";
import nDraggable from "draggable";
import hash from "object-hash";
import _ from "lodash";

export default defineComponent({
  name: "plumb-flow",
  props: {
    nodes: {
      type: Array,
      default: () => [],
    },
    edges: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const state = reactive({
    });
    var plumbInstance;
    let panelInit = () => {
      if (plumbInstance) plumbInstance.destroy();
      let _this = this;
      let paperEL = document.getElementById("flow-paper");
      let config = {
        LogEnabled: false,
        Container: "flow-paper",
        DragOptions: { cursor: "pointer" },
        PaintStyle: {
          strokeWidth: 2,
          stroke: "#b8c1c1",
          // outlineStroke:"black",
          outlineWidth: 0,
        },
        selected: {
          paintStyle: { stroke: "red", strokeWidth: 5 },
        },
        ConnectionOverlays: [
          //连线上的默认样式  这里是箭头
          [
            "Arrow",
            {
              location: 1,
              width: 12,
              length: 12,
              paintStyle: {},
            },
          ],
        ],
        // Connector: ["Bezier", { curviness: 30 }],
        Connector: ["Straight", {}],
        Endpoints: ["Dot","Blank"],
        EndpointStyle: { fill: "#b8c1c1", radius: 4 },
        // DragOptions: {cursor: 'pointer', zIndex: 2000},
        Anchor: "AutoDefault", // [ 0.5, 0.5, 1, 1 ]
        MaxConnections: 10,
        ConnectionsDetachable: true,
      };
      plumbInstance = jsPlumb.getInstance(config);
      plumbInstance.setContainer("flow-paper");
      // this.myPlumb.bind("connectionDetached", function (info) {
      //   setTimeout(() => {
      //     _this.save();
      //   });
      // });
      // this.myPlumb.bind("beforeDrop", function ({ sourceId, targetId }) {
      //   setTimeout(() => {
      //     _this.save();
      //   });
      //   return sourceId != targetId;
      // });
    };
    let addEdge = ({ source, target, scope = "xscope", overlays=[]}) => {
      plumbInstance.connect({
        source,
        target,
        scope,
        overlays
      });
    };
    let edgesMap = {};

    let initConnection = () => {
      props.edges.forEach((item) => {
        let edgeId = hash(item);
        if (_.has(item, edgeId)) return;
        addEdge(item);
        edgesMap[edgeId] = item;
      });
    };
    let buildStyle = (node) => {
      return `inset: ${node.y}px auto auto ${node.x}px;`;
    };
    let nodeClick = ($event, node)=>{
      emit('node-click', node)
    } 
    // 网关样式计算
    let getwayStyleCalc = ()=>{
      let getway = document.querySelector("#flow-paper .n-getway")
      console.log("getway===>", getway);
    }

    watch(
      () => props.edges,
      (edges, preEdges) => {
        initConnection();
      }
    );
    // 页面加载时
    onMounted(() => {
      setTimeout(() => {
        panelInit();
        initConnection();
      });
      setTimeout(()=>{
        getwayStyleCalc()
      },200)
    });
    return {
      ...toRefs(state),
      buildStyle,
      nodeClick
    };
  },
});
</script>
